---
title: Dashboard
description: Displays an 8-bit complete dashboard with sidebar and charts.
---

import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/dashboard-01"
    command="pnpm dlx shadcn@latest add @8bitcn/dashboard-01"
  />
</div>

<div className="border rounded-lg p-4 my-4">
  <p className="text-sm text-muted-foreground mb-4">
    A complete 8-bit dashboard template with sidebar navigation, charts, data tables, and stat cards. Perfect for admin panels and data-driven applications.
  </p>
  <a href="/dashboard" target="_blank" className="text-primary hover:underline">
    View full Dashboard demo →
  </a>
</div>

## Features

- Collapsible sidebar navigation
- Interactive charts (bar, area, line)
- Data tables with sorting
- Stat cards with trends
- Responsive layout

## Installation

---

<InstallationCommands packageName="dashboard-01" />

## Usage

---

```tsx
import Dashboard from "@/components/ui/8bit/blocks/dashboard-01"
```

```tsx
// Use as a full page component
export default function Page() {
  return <Dashboard />
}
```

